// webpack构建流程：
// 1、初始化参数 2、开始编译 3、确定入口 4、编译模块 5、完成模块编译并输出 6、输出完成

// path是node内置的一个模块
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// node模块导出
module.exports = {
    mode: "development", //开发模式，不压缩
    // 指定入口文件
    entry: "./src/main.js",
    // 指定出口
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
        // 打包时自动在url前面拼接dist
        // publicPath: "/dist/",
    },
    module: {
        // 配置loader
        rules: [{
                // \转义
                test: /\.css$/,
                // css-loader只负责加载
                // style-loader负责将样式添加到DOM
                // 使用多个loader从右向左
                // use: ["style-loader", "css-loader"],
                // 使用外链引入css
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    "css-loader",
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: "img/[name].[ext]",
                        limit: 1024,
                        esModule: false,
                    },
                },
            },
            {
                test: /\.(htm|html)$/,
                loader: "html-withimg-loader",
            },
            {
                // \转义
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html",
            filename: "index.html",
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
        }),
    ],
    // 解决runtime-only  代码中不能有template
    resolve: {
        // 扩展名省写
        extensions: [".js", ".css", ".vue"],
        // alias别名
        alias: {
            vue$: "vue/dist/vue.esm.js",
        },
    },
};